<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
        .panorama {width:100%; height: 500px;}
        #result {width:100%;font-size:12px;}
    </style>
    <script src="https://api.map.baidu.com/api?v=3.0&ak=mdnhGBfrWDZaj7r7P3G2aKSiwTsxFEac"></script>
    <title>获取指定的全景图</title>
</head>
<body>
    <div class="panorama" id="panorama"></div>
    <div id="result">
        <button id="setPanoramaByLocation">按经纬度展示全景</button><button id="setPanoramaById">按全景Id展示全景</button>
    </div>
    <div class="panorama" id="panorama2"></div>
</body>
</html>
<script type="text/javascript"> 
    // 百度地图API功能
    //GPS坐标
    var x = 106.8916203;
    var y = 39.4468495;
    var ggPoint = new BMap.Point(x,y);

    //地图初始化
    var bm = new BMap.Map("panorama");
    bm.centerAndZoom(ggPoint, 15);
    bm.addControl(new BMap.NavigationControl());

    //添加gps marker和label
    var markergg = new BMap.Marker(ggPoint);
    bm.addOverlay(markergg); //添加GPS marker
    var labelgg = new BMap.Label("未转换的GPS坐标（错误）",{offset:new BMap.Size(20,-10)});
    markergg.setLabel(labelgg); //添加GPS label

    //坐标转换完之后的回调函数

    //高德坐标转百度（传入经度、纬度）
    function bd_encrypt(gg_lng, gg_lat) {
        var bd_point = {};
        var X_PI = Math.PI * 3000.0 / 180.0;
        var x = gg_lng, y = gg_lat;
        var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * X_PI);
        var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * X_PI);
        var bd_lng = z * Math.cos(theta) + 0.0065;
        var bd_lat = z * Math.sin(theta) + 0.006;
        bd_point = {
           lat: bd_lat,
           lng: bd_lng
        };
        return bd_point;
    }

    //坐标转换完之后的回调函数
    var _bd_point = bd_encrypt(x,y);
    console.log('_bd_point---->', _bd_point);
    var marker = new BMap.Marker(_bd_point);
    bm.addOverlay(marker);
    var label = new BMap.Label("转换后的百度坐标（正确）",{offset:new BMap.Size(20,-10)});
    marker.setLabel(label); //添加百度label
    bm.setCenter(_bd_point);

    var panorama = new BMap.Panorama('panorama2'); 
    panorama.setPov({heading: -40, pitch: 6});
    document.getElementById("setPanoramaByLocation").onclick = function(){ 
        panorama.setPosition(new BMap.Point(120.320032, 31.589666)); //根据经纬度坐标展示全景图     
    };
    document.getElementById("setPanoramaById").onclick = function(){ 
        panorama.setId('0100010000130501122416015Z1');//根据全景id展示全景图
    };
</script>

